<template>
  <div class="cascader-node flex justify-between items-center">
    <el-tooltip :open-delay="1000"
      :content="data.description || data[replaceField.label]"
      :disabled="(type !== 'dataset' && (!data.description || data.description === '') ) || !data[replaceField.label]"
      placement="right"
      v-if="type === 'dataset'"
    >
      <div slot="content">
        <span v-if="showLabel">{{data[replaceField.label]}}<br/></span>
        {{data.description}}
      </div>
      <span style="width:200px;margin-right:10px" class="cascader-node-label" ref="label">{{ data[replaceField.label] }}</span>
    </el-tooltip>

    <ZTooltip :line="1"
      v-else
      placement="right"
      :content="data[replaceField.label]"
      :toolTipType="'botWidget'"
      >
      <span :style="widthLength === 'not omitted'?'margin-right:10px' : 'width:200px;margin-right:10px'">{{ data[replaceField.label] }}</span>
    </ZTooltip>

    <span size="mini"
          class="cascader-node-tag"
          :style="color">
      <slot>
        {{data[replaceField.status]}}
      </slot>
    </span>
  </div>
</template>

<script>

import ZTooltip from '@/components/storybook/z-tooltip'
const DEFAULT_FIELD = {
  status: 'status',
  label: 'label'
}
export default {
  name: 'CascaderNode',
  components: { ZTooltip },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    props: {
      type: Object,
      default: () => ({})
    },
    widthLength: {
      type: String
    }

  },
  data () {
    return {
      showLabel: false,
      type: undefined
    }
  },
  computed: {
    color () {
      switch (this.data[this.replaceField.status]) {
        case 'In-Dev':
          return { color: '#F56C6C', backgroundColor: '#FFF1F0' }

        case 'Published':
          return { color: '#67C23A', backgroundColor: '#EEF5DC' }

        case 'Alpha':
          return { color: '#E6A23C', backgroundColor: '#F2F2F2' }

        case 'In-QA':
          return { color: '#909399', backgroundColor: '#F2F2F2' }

        case 'Requested':
          return { color: '#138DC7', backgroundColor: '#E6F7FF' }
      }
    },
    replaceField () {
      return Object.assign({}, DEFAULT_FIELD, this.props)
    }
  },
  mounted () {
    this.$nextTick(() => {
      const el = this.$refs.label
      if (el) {
        this.showLabel = el.clientWidth < el.scrollWidth
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.cascader-node {
  height: 34px;
  width: 100%;
  &-label {
    display: block;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:hover{
      background: #F5F7FA;
    }
  }
  &-tag {
    display: inline-block;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 10px;
    padding: 0 12px;
    margin-left: auto;
  }
}
</style>
